<template>
  <div class="cover">
    <div class="cover-title">设置封面图</div>
    <div class="add" v-if="thumbnail == ''" @click="pickThumbnail">
      <img src="@/assets/img/add.png" alt="" />
    </div>
    <div v-else class="thumbnail">
      <img :src="thumbnailUrl" alt="" @click="changeImage" />
      <van-icon name="close" @click.native.stop.prevent="close" />
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="onSelect"
    />
  </div>
</template>

<script>
export default {
  props: {
    thumbnail: {
      type: String,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      show: false,
      actions: [{ name: "更换封面" }],
      thumbnailUrl: "",
    };
  },
  watch: {
    thumbnail(newVal) {
      console.log(newVal)
      this.thumbnailUrl = newVal;
    },
  },
  methods: {
    close() {
      this.$Dialog
        .confirm({
          title: "提示",
          message: "是否删除该封面？",
        })
        .then(() => {
          this.$emit("delThumbnail", "");
        })
        .catch(() => {
          // on cancel
        });
    },
    pickThumbnail() {
      Android.pickThumbnail();
    },
    changeImage() {
      this.show = true;
    },
    onCancel() {
      this.show = false;
      // this.$Toast('取消')
    },
    onSelect(e) {
      if (e.name === "更换封面") {
        Android.pickThumbnail();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cover {
  padding: 24px 0;
  margin: 0 32px;
  border-top: 1px #f6f6f6 solid;

  padding-bottom: 100px;
  .cover-title {
    font-size: 28px;
    font-weight: 400;
    color: #333333;
    line-height: 34px;
    margin-bottom: 24px;
  }
  .add {
    width: 686px;
    height: 320px;
    background: #f5f5f5;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 40px;
      height: 40px;
    }
  }
  .thumbnail {
    width: 686px;
    height: 320px;
    background: #f5f5f5;
    position: relative;
    img {
      width: 686px;
      height: 320px;
      object-fit: contain;
    }
    i {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 10;
      color: #888;
    }
  }
}
</style>